<template>
  <PageContainer>
    <Header :title="pageTitle" />
    <view class="hb-bg-white hb-m-4 hb-p-4 hb-pt-0 hb-box-shadow-base hb-rounded-xl">
      <Paglist
        v-model="fileList"
        :is-init-api="false"
        :is-show-loadmore="false"
        :params="params"
        @register="register"
      >
        <template v-for="item in fileList" :key="item.id">
          <view
            class="hb-flex hb-items-center hb-py-4 hb-border-b hb-border-solid hb-border-[#EBEDF0]"
            @click="handleOpenDocument(item)"
          >
            <TmIcon
              class="hb-flex-shrink-0"
              :name="`ali-icon ${getFileIcon(item.fileSuffix).icon}`"
              :follow-theme="false"
              :color="getFileIcon(item.fileSuffix).color"
              :font-size="80"
            />
            <view class="hb-ml-2 hb-flex-1 hb-flex hb-flex-col hb-justify-between">
              <TmText
                _class="text-overflow-1 hb-font-bold"
                :label="item.fileName"
                :font-size="28"
              />
              <view class="hb-flex hb-items-center hb-mt-1">
                <TmImage :src="item.iconFileUrl" :width="32" :height="32" :round="25" />
                <TmText class="hb-ml-1" :label="item.name" :font-size="24" color="#969799" />
              </view>
            </view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* friendSharedFiles 共享文件 */
  import { getFileIcon } from '@/utils';
  import { knowledgeBaseFileShareList } from '@/api/knowledgeBase';
  import {
    KnowledgeBaseFileShareListData,
    KnowledgeBaseFileShareListResult,
  } from '@/api/knowledgeBase/types';
  import { useConList } from '@/components/Paglist/useConList';
  import { useUpload } from '@/hooks/file/useUpload';

  const { openDocument } = useUpload();

  const handleOpenDocument = (item: KnowledgeBaseFileShareListResult) => {
    openDocument({ filePath: item.filePathUrl, fileType: item.fileSuffix });
  };

  const params = reactive<KnowledgeBaseFileShareListData>({
    current: 1,
    size: 10,
    type: 'shared',
    botFriendMapId: 0,
  });

  const fileList = ref<KnowledgeBaseFileShareListResult[]>();

  const [register, { refresh }] = useConList();
  provide('api', knowledgeBaseFileShareList);

  const pageTitle = ref<string>('');
  customOnload<'friendSharedFiles'>((op) => {
    pageTitle.value = op.type === 'shared' ? '我共享给ta' : 'ta共享给我';
    params.botFriendMapId = op.id;
    params.type = op.type;
    refresh();
  });
</script>

<style lang="scss" scoped></style>
